import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { HttpHelper } from '../../../Helper/HttpHelper';
import { DtoResultObj } from 'src/app/Model/DtoRec/DtoResult';

@Component({
  selector: 'wzl-report-dashboard',
  template: `
    <div echarts [options]="options" class="echart"></div>
  `,
})
export class DashboardComponent implements AfterViewInit, OnDestroy {
  options: any = {};
  themeSubscription: any;
  reportData: any;
  constructor(private theme: NbThemeService,
    private HttpHelper: HttpHelper
  ) {

  }

  ngAfterViewInit() {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const echarts: any = config.variables.echarts;

      this.HttpHelper.Post("ps/PsGoods/GetReport", {type:0,startDate:0,endDate:0}).then((data: DtoResultObj<any>) => {
        if (data.success) {
          this.reportData = data.dataList[0];

          this.options = {
            backgroundColor: echarts.bg,
            color: [colors.danger, colors.primary, colors.info],
            title:{
              text: "产品扫码数走势图",
              left: "center",
              top:"10",
              textStyle: {
                color: echarts.textColor,
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}月{c}个',
            },
            // legend: {
            //   top:"10",
            //   left: '20',
            //   data: [this.reportData.name],
            //   textStyle: {
            //     color: echarts.textColor,
            //   },
            // },
            xAxis: [
              {
                type: 'category',
                data: this.reportData.xAxis,
      
                axisLine: {
                  lineStyle: {
                    color: echarts.axisLineColor,
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: echarts.textColor,
                  },
                },
              },
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: echarts.axisLineColor,
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: echarts.splitLineColor,
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: echarts.textColor,
                  },
                },
              },
            ],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            series: [
              {
                name: this.reportData.name,
                type: 'line',
                showAllSymbol: true,
                data: this.reportData.dataList,
              }
            ],
          };
          console.log(this.options)
        }
      }
      );
    });
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}
